---
import { Icon } from "astro-icon/components";
import { LinkPresets } from "../../constants/link-presets";
import { LinkPreset, type NavBarLink } from "../../types/config";
import { url } from "../../utils/url-utils";

interface Props {
	link: NavBarLink;
	class?: string;
}

const { link, class: className } = Astro.props;

// 转换子菜单中的LinkPreset为NavBarLink
const processedLink = {
	...link,
	children: link.children?.map((child: NavBarLink | LinkPreset): NavBarLink => {
		if (typeof child === "number") {
			return LinkPresets[child];
		}
		return child;
	}),
};

const hasChildren = processedLink.children && processedLink.children.length > 0;
---

<div class:list={["dropdown-container", className]} data-dropdown>
	{hasChildren ? (
		<button 
			class="btn-plain scale-animation rounded-lg h-11 font-bold px-5 active:scale-95 dropdown-trigger"
			aria-expanded="false"
			aria-haspopup="true"
			data-dropdown-trigger
		>
			<div class="flex items-center">
				{processedLink.icon && <Icon name={processedLink.icon} class="text-[1.1rem] mr-2" />}
				{processedLink.name}
				<Icon name="material-symbols:keyboard-arrow-down-rounded" class="text-[1.25rem] transition-transform duration-200 dropdown-arrow ml-1" />
			</div>
		</button>
		<div class="dropdown-menu" data-dropdown-menu>
			<div class="dropdown-content">
				{processedLink.children?.map((child) => (
					<a 
						href={child.external ? child.url : url(child.url)} 
						target={child.external ? "_blank" : null}
						class="dropdown-item"
						aria-label={child.name}
					>
						<div class="flex items-center">
							{child.icon && <Icon name={child.icon} class="text-[1rem] mr-2" />}
							<span>{child.name}</span>
						</div>
						{child.external && (
							<Icon name="fa6-solid:arrow-up-right-from-square" class="text-[0.75rem] text-black/25 dark:text-white/25" />
						)}
					</a>
				))}
			</div>
		</div>
	) : (
		<a 
			aria-label={processedLink.name} 
			href={processedLink.external ? processedLink.url : url(processedLink.url)} 
			target={processedLink.external ? "_blank" : null}
			class="btn-plain scale-animation rounded-lg h-11 font-bold px-5 active:scale-95"
		>
			<div class="flex items-center">
				{processedLink.icon && <Icon name={processedLink.icon} class="text-[1.1rem] mr-2" />}
				{processedLink.name}
				{processedLink.external && <Icon name="fa6-solid:arrow-up-right-from-square" class="text-[0.875rem] transition -translate-y-[1px] ml-1 text-black/[0.2] dark:text-white/[0.2]" />}
			</div>
		</a>
	)}
</div>

<style>
	.dropdown-container {
		@apply relative;
	}

	.dropdown-menu {
		@apply absolute top-full left-0 pt-2 opacity-0 invisible pointer-events-none transition-all duration-200 ease-out transform translate-y-[-8px] z-50;
	}

	.dropdown-container:hover .dropdown-menu,
	.dropdown-container:focus-within .dropdown-menu {
		@apply opacity-100 visible pointer-events-auto translate-y-0;
	}

	.dropdown-container:hover .dropdown-arrow,
	.dropdown-container:focus-within .dropdown-arrow {
		@apply rotate-180;
	}

	.dropdown-content {
		@apply bg-[var(--float-panel-bg)] rounded-[var(--radius-large)] shadow-xl dark:shadow-none border border-black/5 dark:border-white/10 py-2 min-w-[12rem];
	}

	.dropdown-item {
		@apply flex items-center justify-between px-4 py-2.5 text-black/75 dark:text-white/75 hover:text-[var(--primary)] hover:bg-[var(--btn-plain-bg-hover)] transition-colors duration-150 font-medium;
	}

	.dropdown-item:first-child {
		@apply rounded-t-[calc(var(--radius-large)-0.5rem)];
	}

	.dropdown-item:last-child {
		@apply rounded-b-[calc(var(--radius-large)-0.5rem)];
	}

	/* 移动端隐藏下拉菜单 */
	@media (max-width: 768px) {
		.dropdown-container {
			@apply hidden;
		}
	}
</style>

<script>
	// 键盘导航支持
	document.addEventListener('DOMContentLoaded', function() {
		const dropdowns = document.querySelectorAll('[data-dropdown]');
		
		dropdowns.forEach(dropdown => {
			const trigger = dropdown.querySelector('[data-dropdown-trigger]');
			const menu = dropdown.querySelector('[data-dropdown-menu]');
			const items = dropdown.querySelectorAll('.dropdown-item');
			
			if (!trigger || !menu) return;
			
			// 键盘事件处理
			trigger.addEventListener('keydown', function(e) {
				if (e.key === 'Enter' || e.key === ' ') {
					e.preventDefault();
					toggleDropdown(dropdown, trigger, menu);
				} else if (e.key === 'ArrowDown') {
					e.preventDefault();
					openDropdown(dropdown, trigger, menu);
					if (items.length > 0) {
						items[0].focus();
					}
				} else if (e.key === 'Escape') {
					closeDropdown(dropdown, trigger, menu);
				}
			});
			
			// 菜单项键盘导航
			items.forEach((item, index) => {
				item.addEventListener('keydown', function(e) {
					if (e.key === 'ArrowDown') {
						e.preventDefault();
						const nextIndex = (index + 1) % items.length;
						items[nextIndex].focus();
					} else if (e.key === 'ArrowUp') {
						e.preventDefault();
						const prevIndex = (index - 1 + items.length) % items.length;
						items[prevIndex].focus();
					} else if (e.key === 'Escape') {
						closeDropdown(dropdown, trigger, menu);
						trigger.focus();
					}
				});
			});
		});
		
		// 点击外部关闭下拉菜单
		document.addEventListener('click', function(e) {
			dropdowns.forEach(dropdown => {
				if (!dropdown.contains(e.target)) {
					const trigger = dropdown.querySelector('[data-dropdown-trigger]');
					const menu = dropdown.querySelector('[data-dropdown-menu]');
					if (trigger && menu) {
						closeDropdown(dropdown, trigger, menu);
					}
				}
			});
		});
	});
	
	function toggleDropdown(dropdown, trigger, menu) {
		const isOpen = trigger.getAttribute('aria-expanded') === 'true';
		if (isOpen) {
			closeDropdown(dropdown, trigger, menu);
		} else {
			openDropdown(dropdown, trigger, menu);
		}
	}
	
	function openDropdown(dropdown, trigger, menu) {
		trigger.setAttribute('aria-expanded', 'true');
		menu.classList.remove('opacity-0', 'invisible', 'pointer-events-none', 'translate-y-[-8px]');
		menu.classList.add('opacity-100', 'visible', 'pointer-events-auto', 'translate-y-0');
	}
	
	function closeDropdown(dropdown, trigger, menu) {
		trigger.setAttribute('aria-expanded', 'false');
		menu.classList.add('opacity-0', 'invisible', 'pointer-events-none', 'translate-y-[-8px]');
		menu.classList.remove('opacity-100', 'visible', 'pointer-events-auto', 'translate-y-0');
	}
</script>